<template>
    <!-- 容器 -->
    <div class="charts" ref="charts"></div>
</template>

<script>
//引入echarts
import * as echarts from 'echarts';

export default {
    name: 'lineChart',
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(this.$refs.charts);
        // 绘制图表
        myChart.setOption({
            xAxis: {
                //隐藏x轴
                show: false,
                type: 'category',

            },
            yAxis: {
                //隐藏y轴
                show: false
            },
            series: [
                {
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20],
                    //拐点的样式设置
                    symbol: 'none',
                    //线条的样式
                    lineStyle: {
                        color: 'yellowgreen'
                    },
                    //设置折线平滑
                    smooth: true,
                    //填充颜色设置
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0, color: 'yellowgreen' // 0% 处的颜色
                                },
                                {
                                    offset: 1, color: '#fff' // 100% 处的颜色
                                }],
                            global: false // 缺省为 false
                        },
                        optacity:0.2
                    }
                },

            ],
            

            //布局调试
            grid: {
                left: 0,
                top: 0,
                right: 0,
                bottom: 0
            }
        });
    },
    methods: {

    },
};
</script>

<style  scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>